<template>
	<div>
		<el-row :gutter="20">
			<el-col :span="24">
				<el-select v-model="search_name" value-key="id" remote filterable placeholder="请搜索地址添加"
					@change="handlecheckAddress" :remote-method="addressChange" style="width: 100%;">
					<el-option v-for="item in address_list" :key="item.id" :label="item.address" :value="item">
					</el-option>
				</el-select>
			</el-col>
		</el-row>
		<div class="addressd-box">
			<div class="addressd-box-title">
				<span>选中地址,点击即可删除</span>
				<el-button type="danger" plain size="mini" @click="delAll">全部清空</el-button>
			</div>
			<div class="choose-address">
				<div class="choose-address-info" v-for="(item, index) in check_address" :key="index">
					<el-button type="primary" size="mini" icon="el-icon-delete" @click="delAddress(index)">{{item.address}}
					</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import API from '@/api/index.js'

	export default {
		data() {
			return {
				address_list: [],
				c_project_id: this.project_id,
				page: 1,
				search_name: '',
				addresses: this.parent_addresses,
				check_address: []
			}
		},
		props: ['project_id', 'parent_addresses'],
		watch: {
			project_id(val) {
				this.c_project_id = val;
				this.addressChange();
			},
			parent_addresses(val) {
				this.addresses = val;
			}
		},
		mounted() {
			this.addressChange();
		},
		methods: {
			// 加载更多数据
			addressChange(val) {
				let self = this;
				self.search_name = val;
				API.searchAddresses([], self.c_project_id, self.search_name).then(res => {
					let data = res.data.data;
					self.$notify({
						message: '搜索成功'
					});
					self.address_list = [];
					data.map(item => {
						self.address_list.push({
							id: item.id,
							address: item.address
						})
					})
					return self.address_list;
				}).catch(err => {
					self.$message.error(err.response.data.message)
				});
			},
			// 选中的地址
			handlecheckAddress(val) {
				let self = this;
				let copy_check_address = [];
				copy_check_address.push(val);
				for (let i = 0; i < copy_check_address.length; i++) {
					if (!self.check_address.includes(copy_check_address[i])) { //includes 检测数组是否有某个值
						self.check_address.push(copy_check_address[i]);
						self.addresses.push(copy_check_address[i].id);
					} else {
						self.$notify.error({
							message: '已选中该地址,请勿重复选择'
						});
					}
				}
				self.$emit('getAddresses', {
					addresses: self.addresses
				})
			},
			// 删除地址
			delAddress(val) {
				let self = this;
				self.check_address.splice(val, 1);
				self.addresses.splice(val, 1);
				self.$emit('getAddresses', {
					addresses: self.addresses
				})
			},
			// 全部清空
			delAll() {
				let self = this;
				self.addresses = [];
				self.check_address = [];
				self.$emit('getAddresses', {
					addresses: self.addresses
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.addressd-box {
		box-sizing: border-box;
		margin-top: 10px;
		// padding: 10px;
		border: 1px #ccc solid;
		border-radius: 10px;

		.addressd-box-title {
			display: flex;
			align-items: center;
			padding: 6px 10px;
			font-size: 14px;
			
			span {
				margin-right: 10px;
			}
		}

		.choose-address {
			display: flex;
			flex-wrap: wrap;

			.choose-address-info {
				margin: 6px;
			}
		}
	}
</style>
